<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模型故障列表</title>
    <link rel="stylesheet" href="../../../static/css/layui.css" th:href="@{/css/layui.css}" media="all">
    <link rel="stylesheet" href="../../../static/css/style.css" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2.min.css"
        th:href="@{/ajax/libs/select2/select2.min.css}">
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2-bootstrap.min.css"
        th:href="@{/ajax/libs/select2/select2-bootstrap.min.css}">
    <link rel="stylesheet" href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" href="../../../static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
        th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.css"
        th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/bootstrap-table/bootstrap-table.min.css"
        th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" href="../../../static/css/animate.min.css" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" href="../../../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css}">
    <link rel="stylesheet" href="../../../static/css/add.css" th:href="@{/css/add.css}">
    <link rel="stylesheet" href="../../../static/css/equipment.css" th:href="@{/css/equipment.css}">
    <link rel="stylesheet" href="../../../static/css/oy-jichu.css" th:href="@{/css/oy-jichu.css}" />
    <link rel="stylesheet" href="../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}" />
    <!-- <link rel="stylesheet" href="../../../static/ajax/libs/layui/css/modules/laydate/default/laydate.css"> -->
    <!-- <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" /> -->

    <link th:href="@{/modelError/css/app.css?v=7}" rel="stylesheet" />
    <link th:href="@{/modelError/css/chunk-vendors.css?v=7}" rel="stylesheet" />
    <!-- 工作树样式 -->
</head>
<style>
    table {
        width: 1200px;
        /* height: 1000px; */
        height: 100%;
        /* margin: auto; */
    }

    th {
        text-align: center;
    }

    td {
        text-align: center;
    }

    h4 {
        cursor: pointer;
    }

    .table-view {
        background: #fff;
    }
    .btn{
        width: 50px;
        height: 30px;
        background-color: skyblue;
        border-radius: 15px;
        border: 1px solid skyblue;
        font-weight: 700;
    }
</style>

<body>
    <div class="bx container-fluid">
        <!-- 表格 -->
        <h4 id="return">
            <i class="layui-icon layui-icon-left" style="font-size: 18px; color: #000;"></i>
            返回上一级
        </h4>
        <div class="tablebox" style="margin-top: 20px;">
            <!-- <table id="table" border="1" cellspacing="0" style="background-color: white;"></table> -->

            <table id="table-view" class="table-view" border="1" cellspacing="0">

                <tr>
                    <th colspan="6">故障分析报告</th>
                </tr>
                <tr>
                    <th align="center">故障名称</th>
                    <td colspan="2" align="center" class="data-recordName"></td>
                    <th align="center" style="width:120px">告警点位</th>
                    <td colspan="2" class="data-devname"></td>
                </tr>
                <tr>
                    <th align="center" style="width:120px">所属设备</th>
                    <td colspan="2" class="fault-location"></td>
                    <th align="center">日期</th>
                    <td colspan="2" align="center" class="data-createTime"></td>
                </tr>
                <tr>
                    <th align="center">故障说明(原因)</th>
                    <td colspan="5"></td>
                </tr>
                <tr>
                    <th align="center">监测点名称</th>
                    <td colspan="2" class="data-pointName"></td>
                    <th align="center">组织机构</th>
                    <td colspan="2" class="data-organization" style="font-size: 13px;"></td>
                </tr>
                <tr>
                    <th align="center">上限值</th>
                    <td colspan="2" class="data-upper"></td>
                    <th align="center">下限值</th>
                    <td colspan="2" class="data-lower"></td>
                </tr>
                <tr>
                    <th align="center">当前采集值</th>
                    <td colspan="2" class="data-collection"></td>
                    <th align="center">分析时间</th>
                    <td colspan="2" class="data-time"></td>
                </tr>
                <tr>
                    <td colspan="6" rowspan="4">
                        <h5 style="font-weight: bold;">故障分析图</h5>
                        <div id="app"></div>
                    </td>
                </tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr>
                    <th align="center">故障分析</th>
                    <td colspan="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                    </td>
                </tr>
                <tr>
                    <th align="center">故障处理(结果)</th>
                    <td colspan="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                    </td>
                </tr>
                <tr align="center">
                    <td style="width: 200px;"><strong>报告人</strong></td>
                    <td style="width: 200px;" ></td>
                    <td style="width: 200px;"><strong>处理人</strong></td>
                    <td style="width: 200px;"></td>
                    <td style="width: 200px;"><strong>日期</strong></td>
                    <td style="width: 200px;" ></td>
                </tr>
            </table>

        </div>
        <button id="btn" class="btn">下载</button>
    </div>
    </div>
    </div>

    </div>
    <!-- <script src="../../../static/js/jquery.min.js"></script> -->
    <!-- <script src="../../../static/js/bootstrap.min.js"></script> -->
    <!-- <script src="../../../static/ajax/libs//layui/layui.min.js"></script> -->
    <script src="../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../../../static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"
        th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script src="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.js"
        th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>

    <script src="../../../static/ajax/libs/blockUI/jquery.blockUI.js"
        th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    <script src="../../../static/ajax/libs/iCheck/icheck.min.js" th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
    <script src="../../../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <!-- <script src="../../../static/ajax/libs/layui/layui.min.js" th:src="@{/ajax/libs/layui/layui.min.js}"></script> -->
    <script src="../../../static/ruoyi/js/common.js" th:src="@{/ruoyi/js/common.js}"></script>
    <!-- <script src="../../../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui}"></script> -->
    <script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
    <script src="../../../static/js/layui.js" th:src="@{/js/layui.js}"></script>
    <script src="../../../static/js/dom-to-image.js" th:src="@{/js/dom-to-image.js}"></script>
    <script src="../../../static/js/FileSaver.js" th:src="@{/js/FileSaver.js}"></script>
    <script th:src="@{/modelError/js/chunk-vendors.js?v=7}"></script>
    <script th:src="@{/modelError/js/app.js?v=7}"></script>
    <script type="text/javascript">
        var dagJsonDataFillThere = {};
        var detail = {};
        function jqueryUrl(url) {
            //将地址从"？"位置分割成两部分
            var arr = url.split('?');
            //取地址右边参数部分从"&"位置继续分割，成为单独参数列表
            var params = arr[1].split('&'); //得到[a=1,b=2,c=3]
            //定义一个空对象
            var obj = {};
            for (var i = 0; i < params.length; i++) {
                var param = params[i].split('='); //得到[a,1]、[b,2]、[c,3]
                obj[param[0]] = param[1]; //为对象赋值
            }
            return obj;
        }
        //返回上一级
        $('#return').on('click', function () {
            console.log(134);   
            // window.location.href = `/page-route/fault-analysis-list`
            window.location.href = `/page-route-new/fault-analysis-report`
        })
        // url参数列表
        var urlParams = jqueryUrl(location.href)
        console.log(urlParams);

        let id = urlParams.recordId;    //获取传过来的recordId
        let recordName = decodeURI(urlParams.recordName);       //获取传过来的名称
        console.log(recordName);
        let createBy = decodeURI(urlParams.createBy)
        let ejdw_name = decodeURI(urlParams.ejdw_name)
        let dw_3_name = decodeURI(urlParams.dw_3_name)
        let dw_4_name = decodeURI(urlParams.dw_3_name)
        let dw_5_name = decodeURI(urlParams.dw_5_name)
        let fdwdm_name = decodeURI(urlParams.fdwdm_name)
        $.ajax({
            url: `/youtian/record/${id}`,
            method: 'get',
            success: function (res) {
                // console.log(res);
                detail = res.data.reportDetailsVos
                dagJsonDataFillThere = res.data
                // console.log(detail,'============='); 
                $('.data-recordName').text(recordName)   
                $('.data-createTime').text(createBy);
                $('.data-devname').text(fdwdm_name);
                // $('.fault-location').text(dwmc);
                $('.fault-location').text(ejdw_name + '-' + dw_3_name + '-' + dw_4_name + '-' + dw_5_name);
                //监测点、组织机构、上下限值、时间
                $('.data-pointName').text(detail.pointname);
                $('.data-organization').text(detail.ejdw_name + '-' + detail.dw_3_name + '-' + detail.dw_4_name + '-' + detail.dw_5_name + '-' + detail.fdwdm_name)
                $('.data-upper').text(detail.upper_limit)
                $('.data-lower').text(detail.lower_limit);
                $('.data-collection').text(detail.avalue);
                $('.data-time').text(detail.createtime);
            }
        })

        $(function () {
            //
            $("#btn").click(function () {
                // 插入图片到html
                // var node = document.getElementById('table');
                //     domtoimage.toPng(node)
                //               .then(function (dataUrl) {
                //                   var img = new Image();
                //                   img.src = dataUrl;
                //                   document.body.appendChild(img);
                //               });


                // 下载png图片
                domtoimage.toBlob(document.getElementById('table-view'))
                    .then(function (blob) {
                        console.log(blob);
                        window.saveAs(blob, 'my-node.png');
                    });


                // 下载jpeg图片
                // domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
                //           .then(function (dataUrl) {
                //               var link = document.createElement('a');
                //               link.download = 'my-image-name.jpeg';
                //               link.href = dataUrl;
                //               link.click();
                //           });  

                // var node = document.getElementById('table-view');
                // domtoimage.toPixelData(node)
                //     .then(function (pixels) {
                //         for (var y = 0; y < node.scrollHeight; ++y) {
                //           for (var x = 0; x < node.scrollWidth; ++x) {
                //             pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
                //             /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
                //             pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
                //           }
                //         }
            });
        })
    </script>
</body>

</html>
